<template>
  <div>
    <el-skeleton v-for="item in [1,2,3]" :loading="loading" animated>
      <!-- 骨架屏幕 -->
      <template slot="template">
        <el-row class="row1">
          <el-skeleton-item variant="p" style="width: 30%;"/>
        </el-row>
        <el-row class="item">
          <el-row>
            <el-skeleton-item variant="p" style="width: 20%;"/>
          </el-row>
          <el-row>
            <el-skeleton-item variant="text" style="width: 30%;"/>
          </el-row>
          <el-row>
            <el-skeleton-item variant="text" style="width: 20%;"/>
            <el-skeleton-item variant="text" style="width: 20%;margin-left: 10px;"/>
          </el-row>
          <el-row class="count">
            <span>0 篇内容</span>
            <div class="point"></div>
            <span>0 赞同</span>
          </el-row>
        </el-row>
      </template>
    </el-skeleton>
    <template v-if="!loading">
      <el-row class="row1">我的专栏</el-row>
      <el-row class="item" v-for="item in classifyList">
        <el-row class="title">{{ item.class_name }}</el-row>
        <el-row class="describe">{{ item.describe }}</el-row>
        <el-row class="count">
          <span>7 篇内容</span>
          <div class="point"></div>
          <span>19 赞同</span>
        </el-row>
      </el-row>
    </template>
  </div>
</template>

<script>
import {getArticleClass} from '@/api/classify';

export default {
  name: 'classify',
  data() {
    return {
      classifyList: [],
      loading:true,
    };
  },
  created() {
    this.getClassifyList();
  },
  methods: {
    async getClassifyList() {
      this.loading=true
      let res
      try {
         res = await getArticleClass();
        this.classifyList = res.data;
        console.log(res);
      }catch (e) {
      }finally {
        this.loading=false
      }
    },
  },
};
</script>

<style scoped lang="less">
.row1 {
  font-weight: 600;
  border-bottom: 1px solid #F6F6F6;
  padding: 10px 0;
  font-size: 16px;
}

.item {
  font-size: 15px;
  padding: 10px 0;

  & + & {
    border-top: 1px solid #F6F6F6;
  }

  .title {
    font-size: 18px;
    color: black;
    font-weight: 600;
  }

  .describe {
    color: #646464;
  }

  .count {
    color: #8590A6;
    display: flex;
    align-items: center;

  }

  .point {
    display: inline-block;
    width: 2px;
    height: 2px;
    background-color: #8590A6;
    border-radius: 50%;
    margin: 0 5px;
  }

  .el-row {
    margin-top: 5px;
  }
}
</style>
